<template>
  <!-- 商品热榜 -->
  <div class="box bgc3 sku-sale-rank">
    <div class="header">
      <div class="title">商品热榜
        <span class="sub-title">{{ monthStart }} ~ {{ monthEnd }}</span>
      </div>
    </div>
    <div class="body">
      <el-row v-for="(item,index) in goods" :key="index" style="width: 100%;">
        <el-col :span="5">
          <div class="top" :class="{top1:index===0,top2:index===1,top3:index===2}">{{ index+1 }}</div>
        </el-col>
        <el-col :span="13">
          <div :title="item.skuName" class="sku-name">{{ item.skuName }}</div>
        </el-col>
        <el-col :span="6">
          <div class="count">{{ item.count }}单</div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getSkuTopAPI } from '@/api/workbench'
import { monthStart, monthEnd, monthRungStart, monthRungEnd } from '@/utils/dayjs'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      goods: [],
      monthStart,
      monthEnd
    }
  },
  computed: {},
  watch: {},
  created() {
    this.SkuTop()
  },
  methods: {
    async SkuTop() {
      const { data } = await getSkuTopAPI(10, monthRungStart, monthRungEnd)
      this.goods = data
    }
  }
}
</script>
<style scoped lang='scss'>
@import "~@/styles/home.scss";
.body {
 -webkit-box-flex: 1;
 flex: 1;
 flex-direction: column;
 -webkit-box-pack: justify;
 justify-content: space-between;
 margin-top: 20px;
}
</style>
